<template>
  <div class="w-full h-screen overflow-hidden" ref="boxRef">
    <div class="w-full h-[calc(100vh-50px)] bg-[#f1f3f9] overflow-y-auto">
      <router-view />
    </div>
    <van-tabbar v-model="active" @change="jumpFn">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="orders-o">单据</van-tabbar-item>
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup>
import {ref} from "vue"
import { useRouter } from "vue-router";
const router = useRouter();
const active = ref(0)
const page = ref([
  {
    index: 0,
    path:'home'
  },
  {
    index: 1,
    path: 'documents'
  },
  {
    index: 2,
    path: 'mine'
  }
])
const jumpFn = () => {
  const targetPage = page.value.find(item => item.index === active.value);
  if (targetPage) {
    router.push({ path: `/${targetPage.path}` });
  } else {
    console.error("Page not found");
  }
}
</script>